<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- 点击 首页 ，跳转到/home，但是home设置了路由跳转，就直接到Welcome页面了 -->
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <!-- 卡片的shadow属性可以通过.el-card来设置box-shadow:来设置阴影的样式 -->
    <el-card shadow="hover">
      <!-- layout布局(栅格布局) -->
      <!--:gutter="20" 表示每个栅格之间的间距为20px  -->
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <!-- <el-col :span="10"> 表示第一个栅格占一行24格的10格 如果不写，则默认占满一行 -->
        <el-col :span="10">
          <!-- 带搜索的输入框 -->
          <!-- clearable 表示可清空按钮，输入数据后，输入框中会有一个叉叉用于清空输入 -->
          <!-- @clear 这个事件是在清空按钮点击后立即触发的，把它绑定查询用户函数，也就是在清空输入后立即查询所有用户数据 -->
          <!-- ！！！  输入框数据输入后消失,这是因为没有双向数据绑定v-model ，绑定后，就不会消失了！！！ -->
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getUserList"
          >
            <!-- 点击这个查询图标按钮的时候进行查询函数的调用 -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <!-- 添加用户的按钮 -->
          <!-- 当点击添加按钮的时候将对话置为true，展现出来 -->
          <!-- round 表示为圆形按钮 -->
          <el-button
            type="primary"
            round
            @click="addDialogVisible = true"
          >添加用户</el-button>
        </el-col>
        <!-- 添加用户的对话框内容写在最后面了，方便整体代码的查看 -->
      </el-row>
      <!-- 用户列表区域 -->
      <!-- :data="tableData" 指定本地data中的数据作为数据源 -->
      <!-- border 会给表格添加边框线 -->
      <!-- stripe  隔行变色  （斑马纹） -->
      <!-- highlight-current-row 高亮当前点击的行 -->
      <el-table
        :data="userlist"
        border
        stripe
        highlight-current-row
      >
        <el-table-column type="index">
        <!-- ! 表格之所以会对不齐，就是因为第一个表头开始的位置前一行有东西（一般是注释），导致错位 -->
        <!-- 表格索引列==》第一列的1 2 3。。。 直接写type="index" -->
        </el-table-column>

        <!-- align="center" 格子内容和这个格子对应的表头都会居中 -->
        <el-table-column
          prop="username"
          label="姓名"
          min-width="50px"
          align="center"
        >
        </el-table-column>
        <!-- header-align="center" 这个格子对应的这个表头居中，格子内容不会局中 -->
        <el-table-column
          prop="email"
          label="邮箱"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话"
        >
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色"
        >
        </el-table-column>

        <!-- 状态栏 -->
        <!-- 同时写上 prop="role_name"属性 和 作用域插槽，作用域插槽会覆盖prop属性，所以不用写了-->
        <el-table-column label="状态">
          <!-- 作用域插槽，能够获取当前行的数据  scope.row 就是当前行的所有数据，按需选取即可-->
          <template slot-scope="scope">
            <!--el-switch 开关， 通过v-model双向绑定布尔值来判断开关的开启与关闭
            scope.row.mg_state  表示获取当前行数据中的mg_state值,
            因为通过双向绑定，所以只要swich开关打开或者关闭，就会修改当前行的mg_state值
            -->
            <!-- 通过 @change 监听swich开关的打开与关闭  向监听函数里传入当前行的数据 -->
            <!-- active-color="green" 表示开启状态未绿色  inactive-color="red"表示关闭状态为红色 -->
            <!-- 通过 disabled 属性，让开关只能看，不能选择 -->
            <el-switch
              v-model="scope.row.mg_state"
              @change="userStateChanged(scope.row)"
              active-color="#00A1D6"
              inactive-color="red"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 操作栏没有数据源需要绑定 但是需要作用域插槽进行操作 -->
        <el-table-column
          label="操作"
          width="130px"
        >
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <!--  @click="editDialog(scope.row)" 能够将当前行的数据传递给函数 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="editDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button>
            <!-- 通过tooltip包裹按钮，能使鼠标移入按钮时提示tip -->
            <!-- effect="dark" 表示tip为黑色   content="分配权限" 表示提示的文字
                 placement="top"表示tip展示的位置
                 enterable="false" 默认为true 表示设置鼠标不能移入tip中，这样就能自动隐藏了，不会遮盖到其他按钮
                 (因为true false这些是布尔值，所以必须用 : 绑定，否则会被当成字符串，识别不了报错)
            -->
            <el-tooltip
              effect="dark"
              content="分配权限"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                circle
                size="mini"
                @click="showSetRightDialog(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <!-- @size-change  选择每页数量   @current-change 点击的页码
      :current-page 获取返回数据中的当前页码  :page-size 当前页显示的数据量
      :total绑定总数据量
      -->
      <!-- layout="total, sizes, prev, pager, next, jumper"
      这个是用来显示分页栏展示哪些功能的，total就是展示一共多少条数据  sizes就是有选择每页展示多少数据的下拉框。。。。
      -->
      <!--  :page-sizes="[1, 2, 5, 10, 20]"
      当每页显示的数据量有设置时，且默认显示的数据量也有设置时，会自动匹配，如没有设置，则会显示默认设置的显示量，且分页栏显示更小的数据量
      eg：:page-sizes="[1, 5, 10, 20]" 没有每页2条的选项，那么，如果默认设置每页显示2条，表格渲染成功后会显示每页2条，但分页栏还是按照每页1条来分割的，
      所以，最好要设置上和默认每页展示的数量相同的分页数据量！！
       -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

    </el-card>

    <!-- 添加用户时的对话框Dialog -->
    <!-- :visible.sync="addDialogVisible" 绑定一个本地data中的布尔值addDialogVisible判定是否显示对话框 -->
    <!-- @close="addDialogClosed" 表示当对话框关闭时自动触发的函数addDialogClosed(),进行表单的重置 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 对话框内容主体区域 -->
      <!-- :rules="addFormRules" 表单的验证规则根据绑定的本地data中的addFormRules来进行验证 -->
      <!-- label-width="70px"这是给lable设置最小宽度，若不写，则默认lable独占一行 -->
      <!-- status-icon 当表单中的哪行验证不通过，则会在那行中显示个叉叉提示 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
        status-icon
      >
        <!--  prop="username" 只要加上这个，哪一行就会有个红色的*表示必填项 -->
        <el-form-item
          label="用户名"
          prop="username"
        >
          <!-- 双向绑定input输入框的数据到本地data中的addForm中的username -->
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          prop="mobile"
        >
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <!--  @click="addDialogVisible = false" 表示只要点击了取消就隐藏对话框 -->
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addUserConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户按钮的对话框Dialog -->
    <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 对话框内容主体区域 -->
      <!-- :rules="addFormRules" 因为用的邮箱和手机号验证规则是和add的一样的，所以直接用addFormRules进行格式验证 -->
      <el-form
        :model="editForm"
        :rules="addFormRules"
        ref="editFormRef"
        label-width="70px"
        status-icon
      >
        <el-form-item label="用户名">
          <!-- 双向绑定input输入框的数据到本地data中的addForm中的username,这样本地data中的username是啥，这里面就显示啥 -->
          <!-- disabled 禁止修改 -->
          <el-input
            v-model="editForm.username"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>

        <el-form-item
          label="手机号"
          prop="mobile"
        >
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>

      </el-form>
      <!-- 底部按钮区域 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <!--  @click="aeditDialogVisible = false" 表示只要点击了取消就隐藏对话框 -->
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editUserConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限按钮的对话框Dialog -->
    <el-dialog
      title="分配权限"
      :visible.sync="setRoleDialogVisible"
      width="50%"
      @close="setRoleDialogClosed"
    >
      <!-- 对话框内容主体区域 -->
      <div>
        <p>当前用户：{{userInfo.username}}</p>
        <p>当前角色：{{userInfo.role_name}}</p>
        <p>分配角色：
          <!-- v-model="selectedRoleId" 将select选择的value值双向绑定到本地data中 -->
          <el-select
            v-model="selectedRoleId"
            placeholder="请选择"
          >
            <!--  :label="item.roleName"  表示下拉框的文字
                :value="item.id"   表示下拉框真正选择的传给后端的数据
            -->
            <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </p>
      </div>
      <!-- 底部按钮区域 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <!--  @click="setRoleDialogVisible = false" 表示只要点击了取消就隐藏对话框 -->
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveRoleInfo"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // 自定义验证邮箱的规则
    var checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      // !判断是否有填写内容,当然，这一步可以通过默认的验证规则来实现
      // if (!value) {
      //   return callback(new Error('邮箱不能为空'))
      // }

      // !通过 setTimeout(() => {}, 500),制造延时loading效果，失去焦点0.5s后才会显示是否合法,而且输入框的右侧会有一个loading图标
      setTimeout(() => {
        // 进行正则与传入的value的比较
        if (regEmail.test(value)) {
          // 合法的邮箱,调用callback(),通过验证
          return callback()
        } else {
          // 邮箱不合法，通过callback(new Error('dfadf'))返回一个错误提示
          callback(new Error('邮箱不合法'))
        }
      }, 500)
    }
    // 自定义验证手机号的规则
    var checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      // 判断是否有填写内容,可以通过默认的验证规则来实现这一步
      // if (!value) {
      //   return callback(new Error('手机号不能为空'))
      // }

      // 进行正则与传入的value的比较
      if (regMobile.test(value)) {
        // 合法的手机号,调用callback(),通过验证
        return callback()
      } else {
        // 手机号不合法，通过callback(new Error('dfadf'))返回一个错误提示
        callback(new Error('手机号格式不正确'))
      }
    }

    return {
      // 用于请求后端获取用户列表的请求参数
      queryInfo: {
        // 需要搜索的关键字query
        query: '',
        // 当前的页码
        pagenum: 1,
        // 当前每页显示的数据
        pagesize: 2
      },
      // 保存用户列表
      userlist: [],
      // 用户列表总数据
      total: 0,
      // 判断添加用户的对话框是否显示的布尔值
      addDialogVisible: false,
      // 判断修改用户的对话框是否显示的布尔值
      editDialogVisible: false,
      // 添加用户的表单
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 编辑用户信息时，根据Id查询到的用户信息本地data中存储
      editForm: {
        username: '',
        email: '',
        mobile: ''
      },
      // 添加表单的验证规则
      addFormRules: {
        // trigger:'blur' 失去焦点时触发验证时机
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名长度在3-10位之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: '用户名长度在6-12位之间',
            trigger: 'blur'
          }
        ],
        //! 邮箱和手机号的验证使用自定义验证，不用默认的验证了
        // email: { required: true, message: '请输入邮箱', trigger: 'blur' },
        // mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { min: 11, max: 11, message: '手机号长度不正确', trigger: 'blur' }]
        // !自定以验证和默认的验证可以写在一起，用方括号[]括起来，用{}隔开
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },
      // 控制分配权限的对话框内的展示与隐藏
      setRoleDialogVisible: false,
      // 需要被分配角色的用户信息
      userInfo: {},
      // 所有角色的数据列表，用于加载下拉框的数据
      rolesList: [],
      // 分配角色的下拉框中选中的角色Id值
      selectedRoleId: ''
    }
  },
  // 在声明周期函数中发起初始的数据请求(一打开就加载的数据)
  created () {
    // 调用函数getUserList(),通过axios获取后端用户数据
    this.getUserList()
  },
  methods: {
    // 获取用户列表数据函数  传入参数this.queryInfo，根据这个里面的分页、数量进行获取后数据的渲染
    async getUserList () {
      const { data: res } = await this.$axios.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        // return this.$message.error('获取失败')
        this.$message({
          // 是否显示msg的关闭按钮
          showClose: true,
          message: '错误信息',
          type: 'error'
        })
      }
      // console.log(res)
      // 将获取到的用户列表保存到本地data中
      this.userlist = res.data.users
      // 用户总数量
      this.total = res.data.total
    },
    // 分页栏函数
    // 监听pagesize(每页展示的数据量)选择改变事件
    handleSizeChange (newSize) {
      // console.log(`每页 ${newSize} 条`)
      // 将本地data中的用于调用获取用户列表的请求的参数修改为分页栏选择的数据
      this.queryInfo.pagesize = newSize
      // 调用获取用户列表的请求进行表格重新渲染
      this.getUserList()
    },
    // 监听页码值的改变事件
    handleCurrentChange (newPage) {
      // console.log(`当前页: ${newPage}`)
      this.queryInfo.pagenum = newPage
      // 调用获取用户列表的请求进行表格重新渲染
      this.getUserList()
    },
    // !监听每行数据的swich开关状态函数
    async userStateChanged (userSwitch) {
      // console.log(userSwitch)

      // 通过put请求进行switch开关状态的后台修改
      // 为了方便，将url用 模板字符串 进行写入
      // const { data: res } 将请求返回的数据的data项 解构 命名为res
      const { data: res } = await this.$axios.put(
        `users/${userSwitch.id}/state/${userSwitch.mg_state}`
      )

      // ?等价于这样的写法吗？？？？
      // this.$axios.put('url', { params: {A:userSwitch.id,B:userSwitch.mg_state} }).then((res) => {
      //   return res
      // })

      // 状态码不为200则表示修改失败
      if (res.meta.status !== 200) {
        // 将前端显示的状态取反回修改前的状态
        userSwitch.mg_state = !userSwitch.mg_state
        return this.$message.error('更新用户状态失败')
      }
      // 更新成功
      this.$message.success('更新用户状态成功')
    },
    // 监听添加用户对话框的关闭事件,每次关闭对话框都进行表单的重置
    addDialogClosed () {
      // 通过找到form表单的ref引用名，调用resetFields()函数，进行表单的重置操作
      this.$refs.addFormRef.resetFields()
    },
    // 监听编辑用户对话框的关闭事件,每次关闭对话框都进行表单的重置
    editDialogClosed () {
      // 通过找到form表单的ref引用名，调用resetFields()函数，进行表单的重置操作
      this.$refs.editFormRef.resetFields()
    },
    // 添加用户对话框中的确定按钮事件,点击确定后先进行所有表单的规则验证，防止漏填或填错
    addUserConfirm () {
      // 通过找到form表单的ref引用名，调用validate((valid)=>{})函数，进行表单的与验证，数据合格，valid会返回true，反之，返回false
      this.$refs.addFormRef.validate(async valid => {
        // 预验证不通过
        if (!valid) {
          return false
        }
        // 预验证通过，可以发起axios请求
        const { data: res } = await this.$axios.post('users', this.addForm)
        // 根据接口返回的状态码进行操作是否成功的判断
        if (res.meta.status !== 201) {
          this.$message.error('添加用户失败')
        } else {
          this.$message.success('添加用户成功')
          // 数据提交后，对话框的作用也结束了，所以关闭对话框,将addDialogVisible置为false
          this.addDialogVisible = false
          // 因为添加了一个用户，所以刷新用户列表，也就是重新调用获取用户的函数
          this.getUserList()
        }
      })
    },
    // 编辑用户对话框中的确定按钮事件,点击确定后先进行所有表单的规则验证，防止漏填或填错
    editUserConfirm () {
      // 通过找到form表单的ref引用名，调用validate((valid)=>{})函数，进行表单的与验证，数据合格，valid会返回true，反之，返回false
      this.$refs.editFormRef.validate(async valid => {
        // 预验证不通过
        if (!valid) {
          return false
        }
        // 预验证通过，可以发起axios请求
        const { data: res } = await this.$axios.put(
          'users/' + this.editForm.id,
          { email: this.editForm.email, mobile: this.editForm.mobile }
        )
        // 根据接口返回的状态码进行操作是否成功的判断
        if (res.meta.status !== 200) {
          this.$message.error('修改用户失败')
        } else {
          // 数据提交后，对话框的作用也结束了，所以关闭对话框,将addDialogVisible置为false
          this.editDialogVisible = false
          // msg提示修改成功
          this.$message.success('修改用户信息成功')
          // 因为进行了修改，所以刷新用户列表，也就是重新调用获取用户的函数
          this.getUserList()
        }
      })
    },
    // 每行的编辑按钮的点击事件，通过传入的userId查询到对应的数据，用于展示编辑对话框
    async editDialog (userId) {
      // 通过接口，由用户Id查询到这个用户的数据
      const { data: res } = await this.$axios.get('users/' + userId)
      if (res.meta.status !== 200) {
        return this.$message.error('查询用户信息失败')
      } else {
        // 展示edit编辑对话框
        this.editDialogVisible = true
        // 把通过这行Id查询到的信息保存给本地data中的editForm
        this.editForm = res.data
      }
    },
    // 删除用户数据，根据传入的id找到对应用户，进行删除
    async removeUserById (userId) {
      // 通过confirm弹框询问确认是否删除
      // !.$confirm的返回值是primise类型，所以可以用async await进行简化
      const confirmResult = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '删除用户数据确认',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {
        return err
      })
      // ?当箭头函数只有一行语句时(直接return的情况)，可以简写,也就是不写{}和return
      /** 一般情况
       * .catch((err) => {
            return err
          })

          简写情况
          .catch(err=>err)
       */

      // 通过async await简化获得的confirm返回值（primise）
      // !confirm弹窗的确认返回值为一个字符串 confirm
      // !confirm弹窗的取消返回值为一个字符串 cancel  注意，因为取消会触发confirm的错误提示，所以必须要用.catch()捕获错误
      // console.log(confirmResult)

      // !根据confirm的返回值判断是否点击确认
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        const { data: res } = await this.$axios.delete('users/' + userId)
        if (res.meta.status !== 200) {
          return this.$message.error('删除该用户数据失败')
        } else {
          // 刷新表格要放在return之前，不然会报错
          // 因为删除了一条用户数据，所以重新获取一下用户列表
          this.getUserList()
          return this.$message.success('已成功删除该条数据')
        }
      }
    },
    // 点击操作栏中 分配权限按钮时展示对话框
    async showSetRightDialog (userInfo) {
      // 把获取到的当前行的用户信息存到本地data中，用于在对话框中展示
      this.userInfo = userInfo

      // 在展示对话框之前，获取到所有可分配的角色名称，用于加载下拉框
      const { data: res } = await this.$axios.get('roles')
      if (res.meta.status !== 200) {
        this.$message.error('获取角色列表失败')
      }
      // 获取成功,则将角色列表保存到本地数据中
      this.rolesList = res.data
      // 展示出对话框
      this.setRoleDialogVisible = true
    },
    // 分配角色的对话框中的确认函数，用于提交数据给后端,保存用户的操作
    async saveRoleInfo () {
      // 首先判断一下是否选择了下拉框，进行提示
      if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色！')
      }
      const { data: res } = await this.$axios.put(
        `users/${this.userInfo.id}/role`,
        {
          rid: this.selectedRoleId
        }
      )
      if (res.meta.status !== 200) {
        this.$message.error('更新角色失败')
      }
      this.$message.success('更新角色成功')
      // 刷新表格
      this.getUserList()
      // 关闭分配角色对话框
      this.setRoleDialogVisible = false
    },
    // 关闭分配角色对话框时触发函数，
    setRoleDialogClosed () {
      // 分配角色的下拉框中选中的角色Id值 重置为空
      this.selectedRoleId = ''
      // 选择的对应行的用户信息 重置为空
      this.userInfo = {}
    }
  }
}
</script>

<style lang="less" scoped>
// !通过App.vue里的样式来全局了，这里可以不用写了
  // .el-breadcrumb{
  //   margin-bottom: 15px;
  //   font-size: 18px;
  // }
  // //! 因为是要覆盖掉默认的样式，所以加上  !important  提高自己样式的优先级
  // .el-card{
  //   // box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
  //   // 5px -5px 30px rgba(255, 255, 255, 1) !important;
  //   // ? 但是！，这里加上反而没有效果了，不加才有效果
  //   box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
  //   5px -5px 30px rgba(255, 255, 255, 1);
  // }
  // // 表格样式-距离顶部15px
  // .el-table{
  //   margin-top: 15px;
  //   font-size: 15px;
  // }
  // // 分页栏样式-距离顶部15px
  // .el-pagination{
  //   margin-top: 15px;
  // }

</style>
